<!DOCTYPE html>
<html>
    <head>
        <title>Sprite Image Builder</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var require;
            require = function () {}; // a dummy require function replacement
        </script>
        <!-- image loader -->
        <script type="text/javascript" src="../js/settings.js"></script>
        <script type="text/javascript" src="../data/settings.js"></script>
        <script type="text/javascript" src="../js/colorifier.js"></script>
        <script type="text/javascript" src="../js/player.js"></script>
        <script type="text/javascript" src="../data/playersdefinition.js"></script>
        <script type="text/javascript" src="../js/tile.js"></script>
        <script type="text/javascript" src="../data/tilesdefinition.js"></script>
        <script type="text/javascript" src="../js/building.js"></script>
        <script type="text/javascript" src="../data/buildingsdefinition.js"></script>
        <script type="text/javascript" src="../js/unit.js"></script>
        <script type="text/javascript" src="../data/unitsdefinition.js"></script>
        <script type="text/javascript" src="../js/imageloader.js"></script>
        <!-- sprite image builder -->
        <script type="text/javascript" src="imgbuilder/imgbuilder.js"></script>
    </head>
    <body>
        <p>
            <button>
                Load &amp; build
            </button>
        </p>
        <p>
            If the loading does not finish, try hitting Ctrl+F5.<br />
            <textarea id="tags" cols="80" rows="6">Please wait... </textarea>
        </p>
        <p>
            Generated sprite (save to data/images.png):<br />
            <canvas id="output" style="border: 1px solid black" width="0" height="0"></canvas>
        </p>
        <p>
            Sprite indexes (save to data/sprite.json):<br />
            <textarea id="indexes" cols="80" rows="12"></textarea>
        </p>
    </body>
</html>
